<template>
  <div style="background-color: #fff; height: 100%; overflow-x: auto">
    <div style="display: flex; justify-content: space-between">
      <a-form size="small" :model="pageData" layout="inline" style="margin-top: 20px">
        <a-form-item label="工段">
          <a-select
            style="width: 200px"
            class="bacClass"
            @search="sectionSearch()"
            @change="processSearch()"
            v-model="pageData.sectionName"
            allow-search
            allow-clear
          >
            <a-option
              v-for="item in pageData.sectionNameList"
              :value="item.sectionName"
              :key="item"
            >
              {{ item.sectionName }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="工序">
          <a-select
            style="width: 200px"
            class="bacClass"
            @search="processSearch()"
            v-model="pageData.processId"
            allow-search
            allow-clear
          >
            <a-option v-for="item in pageData.processList" :value="item.id" :key="item">
              {{ item.processName }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="流转卡号">
          <a-input
            class="bacClass"
            style="width: 200px"
            v-model="pageData.flowCardCode"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item label="处理状态">
          <a-select
            v-model="pageData.handleStatus"
            style="width: 200px"
            allow-clear
            class="bacClass"
          >
            <a-option
              v-for="item in pageData.statusList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </a-select>
        </a-form-item>
      </a-form>
      <Toolbar style="margin-top: 20px" :items="['查询']" @select="selectHandle"> </Toolbar>
    </div>
    <div class="cssTable">
      <a-spin
        :loading="pageData.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          style="height: 74vh"
          :suppressDragLeaveHidesColumns="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="pageData.tableList"
          :columnDefs="tableColumns"
          :localeText="localeText1"
        >
        </AgGridVuesCopys>
      </a-spin>
    </div>
    <paginationCopys
      :page-size-options="pagingList1"
      :total="total"
      show-total
      show-jumper
      show-page-size
      @change="PageSize"
      @page-size-change="change1"
      style="justify-content: center; margin-top: 12px"
      :page-size="size"
      :current="page"
    />
  </div>
  <a-drawer
    style="z-index: 999"
    ok-text="保存"
    cancel-text="关闭"
    :drawer-style="{ zIndex: 9999 }"
    :mask-closable="false"
    :visible="pageData.showAdd"
    unmountOnClose
    placement="bottom"
    height="100%"
    @cancel="pageData.showAdd = false"
  >
    <template #title>详情</template>
    <template #footer>
      <a-button @click="pageData.showAdd = false">关闭</a-button>
    </template>
    <AgGridVuesCopys
      :rowHeight="33"
      :headerHeight="33"
      :suppressCopyRowsToClipboard="true"
      style="height: 100%"
      :suppressDragLeaveHidesColumns="true"
      rowSelection="multiple"
      @grid-ready="gridReady2"
      :defaultColDef="defaultColDef"
      class="ag-theme-alpine"
      :rowData="pageData.detailList"
      :columnDefs="tableColumns2"
      :localeText="localeText1"
    >
    </AgGridVuesCopys>
  </a-drawer>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)
const pageData: any = reactive({
  showAdd: false,
  sideTitle: '',
  rHeight: 0,
  tableList: [],
  pageLoading: false,
  flowCardCode: '',
  sectionName: '',
  processId: null,
  statusList: [],
  handleStatus: '',
  detailList: [],
})

const dataForm: any = reactive({})

const defaultColDef: any = {
  sortable: true,
  resizable: true,
  filter: true,
}

const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const tableColumns: any = [
  { headerName: '异常单号', field: 'exceptionCode', width: 150 },
  { headerName: '流转卡号', field: 'flowCardCode', width: 150 },
  { headerName: '工段', field: 'sectionName', width: 150 },
  { headerName: '工序', field: 'processName', width: 150 },
  { headerName: '客户', field: 'customName', width: 150 },
  { headerName: '色号', field: 'colorCode', width: 150 },
  { headerName: '色称', field: 'colorName', width: 150 },
  { headerName: '布号', field: 'clothCode', width: 150 },
  { headerName: '匹数', field: 'houseNum', width: 150 },
  { headerName: '问题类型', field: 'exceptionType', width: 150 },
  { headerName: '问题描述', field: 'exceptionDesc', width: 150 },
  { headerName: '不合格数量', field: 'unqualifiedNum', width: 150 },
  { headerName: '备注', field: 'remark', width: 150 },
  { headerName: '提出部门', field: 'applyDept', width: 150 },
  { headerName: '提出人', field: 'applyEmployee', width: 150 },
  { headerName: '提出时间', field: 'createTime', width: 150 },
  { headerName: '处理人', field: 'handler', width: 150 },
  { headerName: '处理意见', field: 'resolution', width: 150 },
  { headerName: '责任单位', field: 'dutyDept', width: 150 },
  { headerName: '责任人', field: 'dutyPerson', width: 150 },
  { headerName: '承接单位', field: 'nextHandlerDept', width: 150 },
  { headerName: '承接人', field: 'nextHandler', width: 150 },
  { headerName: '处理状态', field: 'handleStatus', pinned: 'right', width: 150 },
  {
    headerName: '操作',
    field: 'action',
    width: 146,
    pinned: 'right',
    cellRenderer: {
      template: `<a-tag class="tagCss" @click="c">详情</a-tag>`,
      setup(props: any) {
        const c = () => {
          detail(props.params.data)
        }
        return {
          c,
        }
      },
    },
  },
]

//详情 表格
const gridOption2 = ref()
const gridReady2 = (params: any) => {
  gridOption2.value = params.api
}
const tableColumns2: any = [
  {
    headerName: '',
    width: 250,
    cellRenderer: (params: any) => {
      return '<span>' + '第' + (numberToChinese(params.rowIndex + 1)) + '处理单位' + '</span>'
    },
  },
  { headerName: '承接单位', field: 'nextHandleDept', width: 250 },
  { headerName: '承接人', field: 'nextHandler', width: 250 },
  { headerName: '处理方法', field: 'handlingOpinion', width: 250 },
  { headerName: '状态', field: 'handleStatus', width: 250 },
]

//分页
const total = ref(0)
const page = ref(1)
const size = ref(10)
function PageSize(val: any) {
  page.value = val
  doRefresh()
}
function change1(val: any) {
  size.value = val
  doRefresh()
}

const numberToChinese = (number:any) => {
  const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  const chineseTenDigits = ['', '十', '百', '千'];
  if (number === 0) return chineseNumbers[0]; // 处理特殊情况
  let result = ''; // 最终的中文数字字符串
  let digit = 0; // 当前位数，用于确定数字的单位

  while (number > 0) {
    const currentDigit = number % 10; // 获取当前位的数字
    if (currentDigit !== 0) {
      // 当前位不为零时才加上对应的单位
      result = chineseTenDigits[digit % 4] + result;
      result = chineseNumbers[currentDigit] + result; // 加上当前位的中文数字
    } else {
      // 当前位为零时，如果结果的开头已经有数字，则加上零
      if (result !== '') {
        result = chineseNumbers[currentDigit] + result;
      }
    }
    digit++; // 移动到下一位
    number = Math.floor(number / 10); // 去掉已经处理过的最低位
  }
  return result;
};

// // 示例用法
// console.log(numberToChinese(11)); // 输出: 十一
// console.log(numberToChinese(13)); // 输出: 十三
// console.log(numberToChinese(56)); // 输出: 五十六


//查询
const formRef = ref()
const doRefresh = () => {
  pageData.pageLoading = true
  post({
    url: '/aps/dwDefect/findPagedDefectsByCondition',
    data: {
      flowCardCode: pageData.flowCardCode,
      sectionName: pageData.sectionName,
      processId: pageData.processId,
      handleStatus: pageData.handleStatus,
      current: page.value,
      size: size.value,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        pageData.tableList = data.records
        gridOption.value.setRowData(data.records)
        total.value = data.total
      }
    })
    .catch(console.log)
    .finally(() => {
      pageData.pageLoading = false
    })
}

const selectHandle = () => {
  page.value = 1
  doRefresh()
}

const detail = (record: any) => {
  get({
    url: '/aps/dwDefectResolution/findResolutionByDefectId?defectId=' + record.defectId,
  }).then(({ data, code, message }: any) => {
    if (code === 200) {
      pageData.detailList = data
      pageData.showAdd = true
    } else {
      Message.error(message)
    }
  })
}

//工段下拉
const sectionSearch = () => {
  post({
    url: '/pdm/worksection/getFieldValue',
    data: {
      sectionName: pageData.sectionName,
    },
  }).then(({ data, code, message }: any) => {
    if (code === 200) {
      pageData.sectionNameList = data
    } else {
      Message.error(message)
    }
  })
}

//工序下拉
const processSearch = () => {
  pageData.processId = ''
  pageData.processList = []
  if (pageData.sectionName) {
    post({
      url: 'pdm/worksectionWorkprocedure/selectPage',
      data: {
        deleteState: 0,
        size: 10000,
        page: 1,
        sectionName: pageData.sectionName,
      },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        pageData.processList = data.list
      }
    })
  }
}

//处理状态下拉
const statusSearch = () => {
  post({
    url: '/aps/dwDefectStatus/findPagedStatus',
    data: {
      current: page.value,
      size: 10000,
    },
  }).then(({ data, code, message }: any) => {
    if (code === 200) {
      pageData.statusList = data.records
    } else {
      Message.error(message)
    }
  })
}

onMounted(() => {
  pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
  //弹出层的高
  if (pageData.rHeight !== undefined) {
    pageData.rHeight = pageData.rHeight
  }
  sectionSearch()
  statusSearch()
  doRefresh()
})
</script>
<style lang='less' scoped>
.main-container {
  height: 100%;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.el-input__wrapper) {
  padding: 0;
  box-shadow: 0 0 0 0;
  border-radius: 0;
  height: 28px;
}

:deep(.el-select) {
  --el-select-input-focus-border-color: white;
  --el-select-border-color-hover: white;
}
</style>